<template>
  <div class="homecontent">
    <!-- <img src="../assets/homepage/1.png" alt=""> -->
    <div class="land">
      <h1>
        Revolutionize Real Estate Investment <br />
        by fragmentation and <br />
        decentralization
      </h1>
      <div class="brief">
        FrontRock dedicate to build products to stimulate customer interactions, to reduce transaction efforts, 
and to iterate the real estate investment experiences.
      </div>
      
      <div class="bg-key">
        <span class="l"></span>
        <span class="r"></span>
      </div>

      <div class="buttons head">
        <!-- <a href="javascript:;" class="start" @click="routePath(7)">Get started</a> -->
        <a href="javascript:;" class="start" @click="gotoMarketplace()">Get started</a>
        <a v-show="false" href="javascript:;" class="know-more">Know more</a>
      </div>
      <br>

      <div class="whatis">
        <p class="title">WHAT IS FRONTROCK?</p>
        <p class="cont">
          A one stop shop for real estate investment.
          <br>
          <br>
          <br>
          Frontrock is integrating blockchain technologies to allow purchasing real estate properties a seamless experience and make the opportunities available to the world. Frontrock Marketplace, Frontrock DEX and Frontrock Banking together provides a one stop shop for real estate investment. 
        </p>
        <div class="block">
          <div class="interact">
            <div class="ico"></div>
            <p class="t">Interaction</p>
            <p class="c">
              An immersive house touring experience given by the best agents on the market.
            </p>
          </div>
          <div class="invest">
            <div class="ico"></div>
            <p class="t">Investment</p>
            <p class="c">
              Buy a piece of your dream property at your fingertips.
            </p>
          </div>
          <div class="bank">
            <div class="ico"></div>
            <p class="t">Banking</p>
            <p class="c">
              Stake FRK through FrontRock Banking to earn yields.
            </p>
          </div>
        </div>
      </div>
      
      <div class="land_page2_bg">
        <div class="info">
          <p class="t">FrontRock Marketplace</p>
          <p class="cont">Frontrock Marketplace makes it extraordinarily convenient for purchasers around the world to view and purchase fragmented real estate properties.</p>
          <div class="buttons">
            <a href="javascript:;" class="start" @click="gotoMarketplace()">Get started</a>
            <a href="javascript:;" class="know-more" @click="routePath(2)">Know more</a>
          </div>
        </div>
      </div>

      <div class="land_page3_bg">
        <div class="computer"></div>
        <div class="info">
          <p class="t">FrontRock DEX</p>
          <p class="cont">FrontRock DEX provides fragmented investment opportunities for retail investors to invest and own a piece of their dream properties while earning appreciation on these properties.</p>
          <div class="buttons">
            <a href="javascript:;" class="start" @click="gotoDex()">Get started</a>
            <a href="javascript:;" class="know-more" @click="routePath(3)">Know more</a>
          </div>
        </div>
      </div>

      <div class="land_page4_bg">
        <div class="arrow"></div>
        <div class="info">
          <p class="t">FrontRock Banking</p>
          <p class="cont">Frontrock crypto-friendly banking solutions allow easy access to staking, borrowing funds, and making payments with seamless fiat-crypto transactions.</p>
          <div class="buttons">
            <a href="javascript:;" class="start">Get started</a>
            <a href="javascript:;" class="know-more" @click="routePath(4)">Know more</a>
          </div>
        </div>
        <div class="computer"></div>
      </div>

      <div class="land_page5_bg">
        <div class="rock"></div>
        <div class="whatis">
          <p class="title">A brand new  
            real estate purchasing experience
          </p>
          <p class="cont">
            FrontRock brings real estate investment to the new era of
            globalization, decentralization and fragmentation. 
          </p>
          <div class="block">
            <div class="interact">
              <div class="ico"></div>
              <p class="t">Global Purchases</p>
              <p class="c">
                Real estate properties on the FrontRock platform are available to all purchasers around the world.
              </p>
            </div>
            <div class="invest">
              <div class="ico i2"></div>
              <p class="t">Fragmented investment</p>
              <p class="c">
                FrontRock makes it possible to purchase real estate properties with a smaller amount of investment.
              </p>
            </div>
            <div class="bank">
              <div class="ico i3"></div>
              <p class="t">Private & transparent</p>
              <p class="c">
                The right amount of transparency eliminates the astronomical hidden fees but still protects privacy.
              </p>
            </div>
            <div class="invest">
              <div class="ico i4"></div>
              <p class="t">streamlined process</p>
              <p class="c">
                Real estate purchases on the Frontrock platform is flexible, interactive and convenient as never before. 
              </p>
            </div>
          </div>
          <div class="buttons">
            <a href="javascript:;" class="start" @click="routePath(2)">Get started</a>
            <!-- <a href="javascript:;" class="know-more">Know more</a> -->
          </div>
        </div>
        <!-- <div class="computer"></div> -->
        <!-- <div class="info">
          <p class="t">FrontRock DEX</p>
          <p class="cont">FrontRock DEX provides fragmented investment opportunities for retail investors to invest and own a piece of their dream properties while earning appreciation on these properties.</p>
        </div> -->
      </div>

    </div>
    
    <section v-show="false" class="product">
      <div class="title">
        <div class="t-box"></div>
        <div class="t-line"></div>
        <div class="t-text"></div>
      </div>
      <div class="banner">
        <!-- <img src="../assets/homepage/home_banner_product.png" alt /> -->
      </div>
    </section>
    <section v-show="false" class="sales">
      <div class="title">
        <div class="t-box"></div>
        <div class="t-line"></div>
        <div class="t-text"></div>
      </div>
      <div class="banner">
        <div class="left">
          <p>关注健康</p>
          <p>
            您的
            <span class="b">体重</span>管理助手
          </p>
          <div class="order">
            <span class="l">售价:￥</span>
            <span class="r">
              970元/大盒
              <em>(24g)</em>
            </span>
            <br />
            <button @click="salesBuy()">立即抢购</button>
          </div>
        </div>
        <div class="right">
          <!-- <img src="../assets/homepage/home_banner_sale.jpg" alt /> -->
        </div>
      </div>
    </section>
    <section v-show="false" class="remind">
      <div class="title">
        <div class="t-box"></div>
        <div class="t-line"></div>
        <div class="t-text"></div>
      </div>
      <div class="banner">
        <div class="left">
          <ul>
            <li>
              <i></i>
              本品不含防腐剂，为素片，表面偶有掉粉、有黄色至黑色麻点为原料本身所带，属正常现象。
            </li>
            <li>
              <i></i>
              食用本品产生饱胀感，婴幼儿、儿童、孕产妇、血糖偏低及高危职业等需强调营养均衡的人士不宜食用。
            </li>
            <li>
              <i></i>
              食用魔芋过敏者不宜食用。
            </li>
            <li>
              <i></i>
              本品中圆苞车前子壳富含膳食纤维，易吸水膨胀有粘性，带来饱胀感，不宜嚼食及食用过多。建议每次餐前不超过4g搭配大量水食用，食用次数可根据个人需求而定。
            </li>
          </ul>
        </div>
        <!-- <img src="../assets/homepage/remind_img.jpg" alt /> -->
      </div>
    </section>
    <section v-show="false" class="news">
      <div class="title">
        <div class="t-box"></div>
        <div class="t-line"></div>
        <div class="t-text"></div>
      </div>
      <div class="banner">
        <div class="left">
          <ul>
            <li>
              <div class="t">小常识</div>
              <div class="cont">随着生活水平的不断提高，人们的饮食习惯已发生了很大的改变，人们对高热量、高脂肪、高蛋白食品和精细食品的摄入量大大增加...</div>
              <a @click="knowDetail(123)" href="javascript:;">了解详情</a>
            </li>
            <li>
              <div class="t">注册会员</div>
              <div class="t">有机会免费获得</div>
              <div class="t">价值600余元产品</div>
              <!--
              <div class="cont">
                目前肥胖依旧是全球性的健康流行病，大部分消费者的体重超过医学推荐值。从1980年至今……
              </div>
              <a @click="knowDetail()" href="javascript:;">了解详情</a>
              -->
            </li>
          </ul>
        </div>
        <!-- <img src="../assets/homepage/news_img.jpg" alt /> -->
      </div>
    </section>
    <section v-show="false" class="member">
      <div class="title">
        <div class="t-box"></div>
        <div class="t-line"></div>
        <div class="t-text"></div>
      </div>
      <div class="banner">
        <div class="t">欢迎注册会员</div>
        <div class="code">
          <!-- <img src="../assets/homepage/qrcode.jpg" alt="qrcode"> -->
        </div>
      </div>
    </section>

    <div class="liji" @click="buy()"></div>
    <!-- 首页价格 -->
    <!-- <div class="price">700</div> -->
    <!-- 首页价格 -->
    <!-- 首页小常识 -->
    <!-- <div class="changshi">随着生活水平的不断提高，人们的饮食习惯已发生了很大的改变，人们对高热量、高脂肪、高蛋白食品和精细食品的摄入量大大增加……</div> -->
    <!-- 首页小常识 -->
    <!-- <div class="more"></div> -->
    <!-- 注册会员免费 -->
    <!-- <div class="changshi2">注册会员，您有机会免费获得本公司价值600余元产品。</div> -->
    <!-- 注册会员免费 -->
  </div>
</template>

<script>
export default {
  methods: {
    gotoMarketplace(){
      // window.open('../marketplace-demo/index.html')
      Bus.$emit('topbar', 9)
    },
    gotoDex(){
      window.open('../frk-frontend/cryptorio/Dark/trading.html')
    },
    routePath(i) {
      Bus.$emit('topbar', i)
    },
    buy() {
      console.log(1)
    },
    salesBuy() {
      console.log("salesBuy")
      window.open('https://www.google.com/', '_blank')
    },
    knowDetail(i) {
      console.log("knowDetail:", i)
      Bus.$emit('topbar', i)
    }
  }
}
</script>

<style lang="scss" scoped>
.b {
  font-weight: bolder;
}
.homecontent {
  width: 100%;
  display: inline-block;
  color: white;
  .land{
    font-family: Newsreader, serif;
    width: 100%;
    display: inline-block;
    h1{
      font-size: 48px;
      font-weight: 900;
      line-height: 52px;
      @media screen and (max-width: 900px) {
        font-size: 36px;
        line-height: 36px;
      }
      @media screen and (max-width: 640px) {
        font-size: 30px;
        line-height: 30px;
        margin-top: 50px;
      }
    }
    .brief{
      width: 40%;
      font-size: 18px;
      display: inline-block;
      line-height: 22px;
      @media screen and (max-width: 720px) {
        width: 70%;
        margin:50px 0 0px 0;
      }
    }
    .bg-key{
      position: relative;
      .l, .r{
        position: absolute;
        width: 43%;
        height: 400px;
        // background-size: 90% auto;
        background-size: 72% auto;
        background-repeat: no-repeat;
        &.l{
          background-image: url(../assets/key_l.png);
          // top: 120px;
          // left: -70px;
          // top: 220px;
          left: 90px;
          top: 180px;
          @media screen and (max-width: 720px) {
            left: -20px;
            top: 150px;
          }
        }
        &.r{
          background-image: url(../assets/key_r.png);
          right: -50px;
          top: 30px;
          width: 33%;
        }
      }
    }
    .whatis{
      border: 1px dashed white;
      border-radius: 100px;
      margin: 17% 0 50px 0;
      color:#F6F5F5;
      padding: 50px;
      display: inline-block;
      width: 58%;
      max-width: 976px;
      @media screen and (max-width: 720px) {
        width: 80%;
        font-size: 14px;
      }
      @media screen and (max-width: 640px) {
        width: 90%;
        padding: 30px 10px;
        border-radius: 30px;
        font-size: 14px;
        margin: 0;
      }
      p{
        margin: 0;
      }
      .title{
        font-size: 42px;
        line-height: 42px;
      }
      .cont{
        width: 80%;
        display: inline-block;
        margin: 0px 0 64px 0;
        line-height: 22px;
      }
      .block{
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        @media screen and (max-width: 640px) {
          flex-direction: column;
        }
        >div{
          display: initial;
          background: rgba(255, 255, 255, 0.13);
          border-radius: 20px;
          width: 22%;
          padding: 40px 15px;
          height: 200px;
          @media screen and (max-width: 720px) {
            width: 95%;
            // padding: 10px 10px 15px 10px;
            padding: 40px 0px;
            margin: 10px 0 20px 0px;
            height: auto;
          }
          .ico{
            width: 65px;
            height: 65px;
            background: url(../assets/land_sub1.png);
            background-size: 100% auto;
            background-repeat: no-repeat;
            display: inline-block;
          }
          .t{
            font-size: 19px;
            line-height: 25px;
            font-weight: 900;
            font-family: "Krona One", monospace;
            margin: 16px 0 24px 0;
            @media screen and (max-width: 720px) {
              font-size: 17px;
              margin: 8px 0 12px 0;
            }
          }
          .c{
            font-size: 15px;
            line-height: 18px;
            font-weight: normal;
            color: #e0e0e0;
            @media screen and (max-width: 720px) {
              font-size: 13px;
              width: 90%;
            }
          }
          &.interact{
            .ico{
            }
            .t{}
            .c{}
          }
          &.invest{
            .ico{
            background-image: url(../assets/land_sub2.png);
            }
            .t{}
            .c{}
          }
          &.bank{
            .ico{
              background-image: url(../assets/land_sub3.png);
            }
            .t{}
            .c{}
          }
        }
      }
    }

    .land_page2_bg{
      background: url(../assets/land_page2_bg.jpeg) no-repeat right, linear-gradient(0deg, #e1e1e5, #e7e7e9);
      background-size: auto 100%;
      height: 800px;
      margin-top: 200px;
      @media screen and (max-width: 640px) {
        margin-top: 100px;
        height: 600px;
        align-items: center;
        background-size: 225% 100%;
        background-position: -200px 0;
      }
      display: flex;
      align-items: center;
      // flex-direction: row;
      color: #070F4E;
      .info{
        // width: 363px;
        width: 35%;
        text-align: left;
        padding: 20px 90px;
        line-height: 48px;
        .t{
          font-size: 48px;
          font-weight: 900;
        }
        .cont{
          line-height: 26px;
          margin: 28px 0 0 0;
        }
        @media screen and (max-width: 720px) {
          padding: 20px;
          width: 100%;
          .cont{
            width: 100%
          }
        }
        .buttons{
          // text-align: center;
          padding: 40px 0;
          // white-space: nowrap;
            @media screen and (max-width: 720px) {
              white-space: initial;
            }
          a{
            width: 45%;
            min-width: 140px;
            text-align: center;
            @media screen and (max-width: 720px) {
              // width:50%;
              width: 100%;
            // }
            // @media screen and (max-width: 540px) {
              // width:45%;
              // width: 90%;
            }

            &.know-more{
              border-color: #EF6566;
              color: #EF6566;
              &:hover{
                // border-color:transparent;
                // color: #fff;
              }
            }
          }
        }
      }
    }

    .land_page3_bg{
      background: white;
      height: 800px;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      // flex-direction: row;
      color: #070F4E;
      @media screen and (max-width: 720px) {
        padding: 80px 0 40px 0;
        align-items: initial;
        flex-direction: column;
        height: auto;
      }
      .computer{
        background: url(../assets/land_page3_bg.png) no-repeat;
        background-size: 100% auto;
        width: 55%;
        max-width: 560px;
        height: 320px;
        margin: 0 0 0 30px;
        @media screen and (max-width: 720px) {
          background-size: 100% auto;
          width: 85%;
          height: 100%;
          min-height: 240px;
          // margin: 0 0 30px 50px;
          margin: auto;
        }
      }
      .info{
        // width: 363px;
        width: 35%;
        text-align: left;
        padding: 20px 0px;
        line-height: 48px;
        @media screen and (max-width: 640px) {
          width: 100%;
          padding: 0 0 0 20px;
        }
        .t{
          font-size: 48px;
          font-weight: 900;
          margin: 0;
        @media screen and (max-width: 740px) {
          font-size: 40px;
        }
        }
        .cont{
          line-height: 26px;
          margin: 23px 0 0 0;
          width: 92%;
        }
        .buttons{
          padding: 40px 0;
          // white-space: nowrap;
          @media screen and (max-width: 540px) {
            white-space: initial;
            }
          a{
            // width: 200px;
            text-align: center;
            width: 45%;
            min-width: 140px;
            &.know-more{
              border-color: #EF6566;
              color: #EF6566;
              &:hover{
                // border-color:transparent;
                // color: #fff;
              }
            }
          }
          @media screen and (max-width: 720px) {
            padding: 40px 0 0 0;
            a{ 
              // width: 45%; 
              width: 90%;
              }
          }
        }
      }
    }

    .land_page4_bg{
      // background: white;
      height: 800px;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      // flex-direction: column-reverse;
      // color: #070F4E;
      color: #fff;
      position: relative;
      @media screen and (max-width: 720px) {
        height: auto;
        padding: 130px 0 50px 0;
        flex-direction: column-reverse;
      }
      .arrow{
        position: absolute;
        background: url(../assets/land_page4_arrow.png) no-repeat;
        background-size:auto 100%;
        // width: 180px;
        // height: 150px;
        // top: 80px;
        // left: 85px;
        width: 14%;
        height: 20%;
        top: 10%;
        left: 10%;
        @media screen and (max-width: 720px) {
          width: 35%;
          // height: 150px;
          height: 8%;
          top: 70px;
          left: 15px;
        }
      }
      .info{
        // width: 390px;
        width: 35%;
        text-align: left;
        // padding: 20px 90px;
        padding: 20px 0px;
        line-height: 48px;
        @media screen and (max-width: 720px) {
          padding: 80px 90px 20px 20px;
          width: 95%;
        }
        @media screen and (max-width: 640px) {
          padding: 40px 0px 20px 20px;
        }
        .t{
          font-size: 48px;
          font-weight: 900;
          margin: 0;
          @media screen and (max-width: 640px) {
            font-size: 36px;
          }
        }
        .cont{
          line-height: 26px;
          margin: 23px 0 0 0;
          @media screen and (max-width: 720px) {
            width: 92%;
          }
        }
        .buttons{
          padding: 40px 0;
          // white-space: nowrap;
          @media screen and (max-width: 540px) { white-space:initial;}
          a{
            width: 45%;
            text-align: center;
            // width: 90%;
            min-width: 140px;
            &.know-more{
              border-color: #EF6566;
              color: #EF6566;
              &:hover{
                // border-color:transparent;
                // color: #fff;
              }
            }
            @media screen and (max-width: 720px) {
              // width: 45%;
              width: 95%;
            }
          }
        }
      }
      .computer{
        background: url(../assets/land_page3_bg.png) no-repeat center;
        background-size: 100% auto;
        // width: 550px;
        // height: 310px;
        // background-size: 100% auto;
        width: 55%;
        max-width: 600px;
        min-width: 400px;
        height: 345px;
        // margin: 0 30px 0 0px;
        @media screen and (max-width: 640px) {
          // margin: 30px 30px 0 -20px;
          margin: auto;
          background-size: 80% auto;
          height: 185px;
        }
      }
    }

    .land_page5_bg{
      background: white;
      color: #070F4E;
      position: relative;
      .rock{
        position: absolute;
        background:url(../assets/land_page4_rock.png) no-repeat;
        background-size: 100% auto;
        width: 200px;
        height: 200px;
        right: 100px;
        top: 100px;
        @media screen and (max-width: 640px) {
          right: -50px;
          top: -30px;
        }
        @media screen and (max-width: 540px) {
          transform: scale(.7);
          right: -70px;
          top: -60px;
        }
      }
      // height: 800px;
      // display: flex;
      // align-items: center;
      // flex-direction: row;
      .whatis{
        color: #070F4E;
        color: inherit;
        width: auto;
        max-width: initial;
        margin: 5% 0 60px 0;
        border:none;
        @media screen and (max-width: 540px) {
          padding: 30px 0;
        }
        .title{
          font-weight: 900;
          @media screen and (max-width: 640px) {
            font-size: 36px;
            line-height: 36px;
            width: 95%;
            display: inline-block;
          }
        }
        .cont{
          color: #20336B;
          @media screen and (max-width: 640px) { 
            width: 92%;
            font-size: 16px;
            margin-bottom: 44px;
          }
        }
        .block{
          >div{
            // background:rgba(0, 0, 0, 5%);
            border-radius: 0;
            width: 17%;
            @media screen and (max-width: 640px) {
              width: 100%;
            }
            .ico{
              width: 90px;
              height: 90px;
              // filter: brightness(0.5);
              background:url(../assets/land_page5_icons.png) no-repeat;
              background-size: 380px auto;
              background-position: -10px 0;
              &.i2{
                background-position: -100px 0;
              }
              &.i3{
                background-position: -190px 0;
              }
              &.i4{
                background-position: -280px 0;
              }
            }
            .t{
              margin: 8px 0 12px 0;
            }
            .c{
              color: inherit;
              padding: 0 15px;
            }
          }
        }
        .buttons{
          padding-bottom: 0;
          width: 40%;
          display: inline-block;
          a{
            width: 45%;
          }
            @media screen and (max-width: 720px) {
              width: 90%;
              padding: 0;
              a{ width: 100%; }
            }
          .know-more{
            border:1px solid #EF6566;
            color: #EF6566;
            &:hover{
              // color: #fff;
              // background: #EF6566;
              // border: 1px solid transparent;
            }
          }
        }
      }
    }

    .buttons{
      // width: 40%;
      padding: 80px 0;
      &.head{
        width: 40%;
        display: inline-block;
        padding:50px 0 80px 0;
      }
      @media screen and (max-width: 720px) {
        width: 90%;
      }
      @media screen and (max-width: 640px) {
        width: 70%;
      }
      .start, .know-more{
        // width: 240px;
        width: 45%;
        height: 40px;
        line-height: 35px;
        box-sizing: border-box;
        border: 2px solid #EF6566;
        box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.2);
        border-radius: 44px;
        color: white;
        font-family: "Krona One", monospace;
        font-size: 14px;
        // font-weight: bold;
        text-decoration: none;
        display: inline-block;
        margin: 0 12px 0 0;
        &.start{
          background: #EF6566;
          &:hover{
            filter: brightness(1.1);
            // background:rgba(255, 255, 255, 0.5), rgba(239, 101, 102, .5);
            // background:rgba(255, 255, 255, .1);
          }
        }
        &.know-more{
          border:1px solid;
          &:hover{
            background: rgba(239, 101, 102, .1);
            // border: 1px solid transparent;
          }
        }
        @media screen and (max-width: 1280px) {
          width: 70%;
        }
        @media screen and (max-width: 720px) {
          width: 90%;
          margin: 0;
        }
      }
    }
  }
}

section {
  min-height: 200px;
  // min-width: 900px;
  margin: 20px 0 50px 0;
  position: relative;
  z-index: 10;

  .title1 {
    height: 80px;
    vertical-align: middle;
    position: relative;
    margin: 0px 0 30px 0;
    &:before,
    &:after {
      content: "";
      position: absolute;
      width: 6px;
      height: 6px;
      border: 1px solid #c9990c;
      border-radius: 50%;
      top: 45%;
      background: white;
    }
    &:before {
      left: 0;
    }
    &:after {
      right: 0;
    }
  }

  .t-box {
    // background: url(../assets/homepage/widget.png) no-repeat 75px 10px;
    width: 350px;
    height: 65px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
  }
  .t-text {
    // background: url(../assets/homepage/widget.png) no-repeat 66px -63px;
    width: 350px;
    height: 66px;
    position: absolute;
    top: 26px;
    left: 50%;
    transform: translateX(-50%);
  }
  .t-line {
    height: 1px;
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    z-index: -1;
    background: #c9990c;
  }
  .banner {
    display: inline-block;
  }
  &.product {
    width: 64%;
    margin: 20px auto;
  }
  &.sales {
    width: 64%;
    margin: 20px auto;

    .t-text {
      background-position-y: -144px;
    }
    .banner {
      width: 100%;
      text-align: left;
      white-space: nowrap;
      .left {
        text-align: left;
        color: #c9990c;
        display: inline-block;
        vertical-align: top;
        margin: 30px 0 0 0;
        p {
          font-size: 40px;
        }
        .order {
          font-size: 16px;
          font-weight: bold;
          margin: 60px 0 10px 0;
          button {
            background: #c9990c;
            padding: 2px 10px 5px 10px;
            display: inline-block;
            color: white;
            font-size: 23px;
            text-decoration: none;
            border-radius: 10px;
            margin: 10px 0 0 0;
            cursor: pointer;
            border: 1px solid transparent;
            font-weight: bold;
            outline: none;
            &:hover {
              color: #c9990c;
              border-color: #c9990c;
              background: white;
            }
          }
          .r {
            color: #3c3c3c;
            font-size: 35px;
            em {
              font-size: 16px;
              font-style: normal;
            }
          }
        }
      }
      .right {
        text-align: right;
        display: inline-block;
        width: 77%;
        img {
          width: 730px;
          display: inline-block;
          margin: 50px 0px -50px 0;
        }
      }
    }
  }

  &.remind {
    min-height: 528px;
    .t-text {
      background-position-y: -231px;
    }
    .banner {
      // background: url(../assets/homepage/remind_bg.jpg) 0px 0px;
      position: absolute;
      left: -30%;
      top: 40px;
      right: -30%;
      z-index: -2;
      bottom: -91px;
      .left {
        display: inline-block;
        width: 500px;
        vertical-align: top;
        padding: 50px 0 0 0;
        margin: 0 50px 0 0;
        color: #c9990c;
        text-align: left;
        ul {
          list-style: none;
          line-height: 25px;
          li {
            border: 1px solid #c9990c;
            border-radius: 10px;
            margin: 25px 10px;
            padding: 15px 30px;
          }
        }
      }
      img {
        display: inline-block;
        width: 500px;
        margin: 100px 0 0 0;
      }
    }
  }

  &.news {
    min-height: 528px;
    width: 64%;
    margin: 20px auto;

    .t-text {
      background-position-y: -315px;
    }
    .banner {
      position: absolute;
      left: 0;
      top: 40px;
      right: 0;
      z-index: -2;
      text-align: left;
      .left {
        display: inline-block;
        width: 44%;
        vertical-align: top;
        padding: 50px 0 0 0;
        color: #c9990c;
        ul {
          list-style: none;
          line-height: 25px;
          li {

            margin: 25px 10px;
            padding: 15px 0px;
            .t {
              font-size: 24px;
              margin: 0 0 25px 0;
            }
            .cont {
              margin: 0 0 25px 0;
              color: #3c3c3c;
            }
            a {
              &:hover {
                color: #c9990c;
                &:after {
                  background: #c9990c;
                }
              }
              text-decoration: none;
              color: #3c3c3c;
              position: relative;
              &:after {
                content: "";
                left: 73px;
                top: 10px;
                right: 0;
                height: 1px;
                background: #3c3c3c;
                position: absolute;
                width: 250px;
              }
            }
          }
        }
      }
      img {
        display: inline-block;
        width: 500px;
        margin: 100px 0px 0 0;
        float: right;
      }
    }
  }
  &.member {
    min-height: 600px;
    width: 64%;
    margin: 20px auto;

    .t-text {
      background-position-y: -398px;
    }
    .t {
      font-size: 60px;
      font-weight: bold;
      margin: 70px 0px 30px 0px;
    }
    .code {
      // background: url(../assets/homepage/widget.png) no-repeat -313px 0px;
      // width: 180px;
      // height: 247px;
      display: inline-block;
    }
  }
} //endof section

.liji {
  position: absolute;
  width: 130px;
  height: 40px;
  top: 1310px;
  left: 370px;
  cursor: pointer;
}

.price {
  position: absolute;
  width: 65px;
  height: 35px;
  top: 1260px;
  left: 436px;
  line-height: 35px;
  font-size: 38px;
  text-align: right;
  font-weight: bold;
  background-color: white;
}

.changshi {
  position: absolute;
  width: 410px;
  height: 80px;
  top: 2555px;
  left: 358px;
  background-color: white;
  font-weight: 500;
  color: #c9990c;
  cursor: pointer;
  font-size: 15px;
}

.more {
  position: absolute;
  width: 70px;
  height: 30px;
  top: 2650px;
  left: 355px;
  background-color: transparent;
  cursor: pointer;
}

.changshi2 {
  position: absolute;
  width: 410px;
  height: 155px;
  top: 2786px;
  left: 358px;
  background-color: white;
  font-weight: 500;
  color: #c9990c;
  cursor: pointer;
  font-size: 15px;
}

@media screen and (max-width: 640px) {

  section {
    min-width: 200px;
    width: 100% !important;
    box-sizing: border-box;
    margin-bottom: 20px;

    .title1 {
      transform: scale(0.755);
    }

    &.product {
      .banner {
        img {
          width: 100%;
        }
      }
    }
    &.sales {
      .banner {
        width: 100%;
        position: relative;
        .left {
          width: 100%;
          text-align: center;
          margin-top: 240px;
          p {
            font-size: 22px;
            margin: 16px 0;
          }
          .order {
            margin-top: 10px;
            .r {
              font-size: 26px !important;
            }
            a {
              font-size: 20px;
            }
            button {
              font-size: 20px;
            }
          }
        }
        .right {
          position: absolute;
          top: 0;
          left: 0; right: 0;
          width: 100%;
          text-align: center;
          img {
            width: 100%;
          }
        }
      }
    }
    &.remind {
      min-height: auto;
      padding: 0;
      .banner {
        display: block;
        position: relative;
        left: auto; right: auto;
        top: 0;
        .left {
          margin: 0;
          padding: 0;
          width: 100%;
          ul {
            padding: 0;
            li {
              box-sizing: border-box;
              margin: 8px;
              padding: 12px;
            }
          }
        }
        img {
          display: block;
          margin-top: 0;
          width: 100%;
        }
      }
    }
    &.news {
      .banner {
        display: block;
        position: relative;
        left: auto; right: auto;
        top: 0;
        .left {
          width: 100%;
          box-sizing: border-box;
          padding: 0;
          ul {
            padding: 0;
            margin: 0;
            li {
              margin: 0;
              padding: 12px;
              &:first-child {
                padding-top: 0;
                .t {
                  font-size: 24px;
                  margin-bottom: 24px;
                }
              }
              .t {
                font-size: 16px;
                margin-bottom: 10px;
              }
            }
          }
        }
        img {
          display: block;
          margin-top: 0;
          width: 100%;
          float: none;
          padding: 12px;
          box-sizing: border-box;
        }
      }
    }
    &.member {
      .banner {
        .t {
          font-size: 32px;
          font-weight: normal;
        }
      }
    }
  }
}
</style>
